<%= link_to(login_local_authentication_url(account.slug), data: { turbo_method: :post }, class: "block group") do %>
  <div class="bg-base-200 p-5 rounded-xl hover:bg-base-300 transition-all duration-300 hover:shadow-2xl hover:shadow-white/10 border border-base-300 hover:border-white/30 transform hover:scale-[1.02] hover:-translate-y-1">
    <div class="flex items-center gap-4">
      <div class="relative">
        <div class="w-14 h-14 rounded-xl flex items-center justify-center text-white font-bold text-xl shadow-lg transform transition-all duration-300 group-hover:scale-110 group-hover:rotate-3" style="background-color: <%= letter_to_color(account.name.first) %>">
          <%= account.name.first.upcase %>
        </div>
        <div class="absolute inset-0 rounded-xl transition-all duration-500 scale-150 opacity-0 group-hover:opacity-100" style="background: radial-gradient(circle, <%= letter_to_color(account.name.first) %>40 0%, transparent 70%); filter: blur(20px);"></div>
        <div class="absolute inset-0 rounded-xl transition-all duration-700 scale-200 opacity-0 group-hover:opacity-100 animate-pulse" style="background: radial-gradient(circle, <%= letter_to_color(account.name.first) %>20 0%, transparent 70%); filter: blur(30px);"></div>
      </div>

      <div class="flex-1">
        <h3 class="text-lg font-semibold text-base-content group-hover:text-white transition-all duration-300 transform group-hover:translate-x-1">
          <%= account.name %>
        </h3>
        <% if account.respond_to?(:slug) && account.slug.present? %>
          <p class="text-sm text-base-content/60 mt-0.5 transition-all duration-300 transform group-hover:translate-x-1 group-hover:text-base-content/90">
            <%= account.slug %>
          </p>
        <% end %>
      </div>

      <div class="text-base-content/40 group-hover:text-white transition-all duration-300 transform group-hover:translate-x-2 group-hover:scale-105">
        <iconify-icon icon="lucide:chevron-right" width="20" height="20"></iconify-icon>
      </div>
    </div>

    <div class="flex justify-start mt-3">
      <% if account.stack_manager&.portainer? %>
        <%= render "devise/sessions/portainer_badge", stack_manager: account.stack_manager %>
      <% end %>
    </div>
  </div>
<% end %>